<template>
  <div id="chosetheme" class="menu-set">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>网站模板</legend>
      <div class="layui-field-box">
        <ul>
          <li v-for="item in templateList" :key="item.Id">
            <div class="theme" @click="changeTheme(item.Id)">
              <img :src="item.ImgUrl" alt="">
              <div class="cover" v-show="pageConfig.theme==item.Id">
                <i class="el-icon-check"></i>
                当前选择
              </div>
            </div>
          </li>
          <!-- <li>
            <div class="theme" @click="changeTheme('default')">
              <img src="/Areas/Template/Content/Design/images/muban1.jpg" alt="">
              <div class="cover" v-show="pageconfig.theme=='default'">
                <i class="el-icon-check"></i>
                当前选择
              </div>
            </div>
          </li>
          <li>
            <div class="theme" @click="changeTheme('tradition')">
              <img src="/Areas/Template/Content/Design/images/muban2.jpg" alt="">
              <div class="cover" v-show="pageconfig.theme=='tradition'">
                <i class="el-icon-check"></i>
                当前选择
              </div>
            </div>
          </li> -->
        </ul>
      </div>
    </fieldset>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    // props: ["pageconfig"],
    methods: {
      changeTheme:function(name){
        this.$store.commit('changeTheme', name);
        // this.pageconfig.theme = name;
        this.$store.dispatch('save')
        // this.$emit("setdone", 1)
      }
    },
    computed: mapState([
      'templateList',
      'pageConfig'
    ])
  }
</script>

<style lang="less" scoped>
  .theme {
    display: inline-block;
    border: 1px solid #999;
    margin: 10px 5px;
    position: relative;
    cursor: pointer;
  }
  .cover {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 14px;
    text-align: center;
    i {
      font-size: 40px;
      display: block;
      margin: 0;
      margin-top: 40px;
      margin-bottom: 10px;
    }
  }
</style>